<template>
  <div ref="bigbox">
    <div class="main">
      <div class="title">
        <div class="serbox">
          <el-input placeholder="请输入订单号"
                    suffix-icon="el-icon-search"
                    v-model="searchText">
          </el-input>
        </div>
        <el-select v-model="invoicesee"
                   placeholder="请选择开票状态"
                   clearable>
          <el-option label="申请中"
                     value="1"></el-option>
          <el-option label="开票成功"
                     value="2"></el-option>
          <el-option label="拒绝"
                     value="3"></el-option>
        </el-select>
        <el-button type="primary"
                   style="margin-left:15px"
                   size="medium"
                   @click="search">查询</el-button>
      </div>
      <div class="table">
        <el-table :data="tablerRecord"
                  stripe
                  style="width: 100%">
          <el-table-column label="序号"
                           type="index"
                           width="100">
          </el-table-column>
          <el-table-column prop="orderSn"
                           label="订单单号">
          </el-table-column>
          <el-table-column prop="goodsName"
                           label="商品名称">
          </el-table-column>
          <el-table-column label="商品单价">
            <template slot-scope="scope">
              <span>￥{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total"
                           label="商品数量">
          </el-table-column>
          <el-table-column label="实付金额">
            <template slot-scope="scope">
              <span>￥{{scope.row.payment}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="seetext"
                           label="开票状态">
          </el-table-column>
          <el-table-column prop="userName"
                           label="用户名称">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="opendet(scope.row.id,scope.row.see)"
                         type="text"
                         v-if="scope.row.see==1||scope.row.see==0"
                         size="small">开票</el-button>
              <el-button @click="opendet(scope.row.id,scope.row.see)"
                         type="text"
                         v-else
                         size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <div class="btns">
          <!-- <el-button type="primary"
                     @click="pop_open=true">开具发票</el-button> -->
        </div>
        <el-pagination background
                       @current-change="changePage"
                       :current-page.sync="page"
                       :page-size="pageSize"
                       layout="total,prev,pager,next,jumper"
                       :total="total">
        </el-pagination>
      </div>
    </div>
    <div class="pop">
      <el-dialog title="确认开票"
                 :visible.sync="pop_det"
                 width="50%">
        <el-form label-width="120px"
                 :model="openpopform">
          <el-form-item label="单位名称">
            <el-input v-model="openpopform.companyName"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="申请时间">
            <el-input v-model="openpopform.createAt"
                      disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="开户行账号">
            <el-input v-model="openpopform.bankCard"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="银行名称">
            <el-input v-model="openpopform.bankName"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="税号">
            <el-input v-model="openpopform.taxNum"
                      disabled></el-input>
          </el-form-item>
          <el-form-item v-if="isbtn==1">
            <el-button type="primary"
                       @click="submit(2)">确认开票</el-button>
            <el-button type="primary"
                       plain
                       @click="submit(3)">拒绝开票</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      invoicesee: "", // 开票状态
      searchText: "", // 输入内容
      page: 1,
      pageSize: 10,
      total: 0,
      openpopform: {},
      tablerRecord: [],
      pop_det: false,
      subId: "",
      isbtn: ""
    }
  },
  mounted () {
    this.getlist();
  },
  methods: {
    getlist () {
      this.$postRequest("/mall/mallInvoiceUser/list", {
        shopId: sessionStorage.getItem('shopId'),
        see: this.invoicesee,
        orderSn: this.searchText,
        pageSize: this.pageSize,
        pageNum: this.page
      }).then(res => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          if (res.rows[i].see == 0) {
            res.rows[i].seetext = "未申请"
          } else if (res.rows[i].see == 1) {
            res.rows[i].seetext = "申请中"
          } else if (res.rows[i].see == 2) {
            res.rows[i].seetext = "开票成功"
          } else if (res.rows[i].see == 3) {
            res.rows[i].seetext = "拒绝"
          }
        }
        this.tablerRecord = res.rows;
      })
    },
    opendet (id, type) {
      this.subId = id;
      this.isbtn = type;
      this.$getRequest("/mall/mallInvoiceUser/" + id, {}).then(res => {
        if (res.code == 200) {
          this.openpopform = res.data;
          this.pop_det = true;
        }
      })
    },
    submit (e) {
      this.$postRequest("/mall/orderOrder/invoice", {
        shopId: sessionStorage.getItem('shopId'),
        orderId: this.subId,
        check: e
      }).then(res => {
        this.$message.success("操作成功")
        this.pop_det = false;
        this.getlist();
      })
    },
    changePage () {
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
      this.getlist();
    },
    search () {
      this.page = 1;
      this.getlist();
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary:nth-of-type(1) {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #333;
}
.main {
  margin: 20px;
  background: #fff;
  .title {
    display: flex;
    align-items: center;
    height: 62px;
    font-size: 14px;
    margin: 0 20px;
    .serbox {
      margin-right: 10px;
    }
  }
  .table {
    margin: 0 20px 20px 20px;
  }
  /deep/ .el-table--fit {
    border: 1px solid #eee;
    border-bottom: none;
  }
  .page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }
}
</style>